<template>
	<div id="ttttt">
		<el-dialog :title="title" v-model="show" @close="close" :destroy-on-close="true" custom-class="dia"
			:center="true" width="770px">
			<div style="display: flex;justify-content: center;">
				<ImportFile @successMsg="successMsg" :url="url" />
			</div>
			<el-card v-if="list.length>0">

				<div style="line-height: 40px;">导入结果</div>
				<div v-for="(item,index) in list" style="margin-bottom: 5px;">
					<div>
						总计：{{item.totalNum}},成功：{{item.successNum}},失败：{{item.errorNum}}
					</div>
					<el-alert :type="item.code=='success'?'success':'error'" :description="item.message" />
				</div>

				<div style="line-height: 40px;">错误原因</div>
				<div v-for="(item,index) in list" style="margin-bottom: 5px;">
					<el-alert type="error" :description="item.error" v-if="item.code=='fail'" />
				</div>

				<div style="line-height: 40px;">信息：</div>
				<div v-for="(item,index) in list" style="margin-bottom: 5px;">

					<div v-for="(info,infoi) in item.info" style="margin-top: 5px;">
						<div style="display: flex;flex-direction: row;align-items: center;">
							<el-alert type="error" :description="info" />
							<el-button type="success" @click="copy(info)" size="min">复制</el-button>
						</div>
					</div>
				</div>

			</el-card>
			<template #footer>

			</template>
		</el-dialog>
	</div>
</template>

<script>
	import ImportFile from '/@/components/upload/ImportFile.vue'
	import {
		copyDomText
	} from '/@/utils/common.js'
	import {
		ref,
		defineComponent,
		watch,
		onMounted,
		nextTick
	} from "vue"
	export default {
		components: {
			ImportFile
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: "导入"
			},
			url: {
				type: String,
				default: ''
			},
		},
		setup(props, {
			emit
		}) {

			const list = ref([])
			const close = () => {
				emit("update:show", false);
				return true;
			}
			const successMsg = (data) => {
				list.value.push(data)
				console.log('JSON>>>>>>>>>>>>1111', JSON.stringify(data));
			}
			onMounted(() => {})
			const copy = (info) => {
				console.log('dianlle')
				copyDomText(info)
			}
			return {
				close,
				successMsg,
				list,
				copy
			}
		}

	}
</script>

<style>
	.dia {
		z-index: 100;
	}
</style>
